<template>
  <div class="manage">
    <div class="manage-header">
        <!-- 新增按钮 -->
        <el-button type="primary" @click="handleAdd">新增</el-button>

        <!-- 搜索区 -->
        
    </div>
    <div class="common-table">
        <!-- table表格的数据 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          height="90%"
          stripe="true">
          <el-table-column
            prop="name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="age"
            label="年龄">
          </el-table-column>
          <el-table-column
            label="姓别">
            <!-- 作用域插槽： 获取插槽传递的数据 -->
            <template slot-scope="scope">
              <span>{{ scope.row.sex?'男':'女' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="birth"
            label="出生日期">
          </el-table-column>
          <el-table-column
            prop="addr"
            label="地址">
          </el-table-column>
          <el-table-column
            prop="act"
            label="操作">
            <template slot-scope="scope">
              <!-- scope.$index获取当前对象的下标 -->
              <el-button
                size="mini"
                @click="handleEdit(scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页条 -->
        <div class="paper">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="handlePage">
          </el-pagination>
        </div>
    </div>

     

    <!-- 弹出框结构 -->
    <el-dialog :title="modelType?'更新用户':'新增用户'"   :inline="true" :visible.sync="dialogFormVisible" :before-close="handleClose">
      <el-form :model="form" :inline='true' label-width="80px" :rules="rules" ref="form">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name"  placeholder="请输入姓名" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age"   placeholder="请输入年龄" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
              <el-select v-model="form.sex" placeholder="请选择">
                <el-option label="男" :value="1"></el-option>
                <el-option label="女" :value="0"></el-option>
              </el-select>
        </el-form-item>
        <el-form-item label="出生日期" prop="birth">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.birth"
              value-format="yyyy-MM-DD"
            ></el-date-picker>
        </el-form-item>
      <el-form-item label="地址" prop="addr">
        <el-input v-model="form.addr" autocomplete="off" placeholder="请输入地址"></el-input>
      </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle" >取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//引入用户信息的相关方法：
import {getUser,addUser,deleteUser,updateUser} from '../api'
export default {
  data() {
    return {
      dialogFormVisible: false,
      form: {
        name: "",
        age: "",
        sex: "",
        birth: "",
        addr:""
      },
      rules:{
        name: [ { required: true, message: '请输入姓名'}],
        age: [ { required: true, message: '请输入年龄'}],
        sex: [{ required: true, message: '请选择性别'}],
        birth: [ { required: true, message: '请选择出生日期'}],
        addr: [ { required: true, message: '请填写地址'}],
      },
      tableData:[],        //用于接收所有的用户信息
      modelType: 0,        //0表示新增的弹窗，1表示逻辑的弹窗
      total: 0,             //总条数

      pageData:{                 //分页数据对象
        page: 1,          //当前页
        limit: 10             //每页条数
      },
      userForm:{
        name: ''
      }
    }
  },
  methods:{
    //表单进行提交方法：
    submit(){
      //获取当前的document对象调用validate方法对整个表单进行校验的方法，参数为一个回调函数
      this.$refs.form.validate((response)=>{
          //response返回的是：  false表示未通过 或 true已通过
          if(response){
            //判断是更新操作还是新增操作：
            if(this.modelType){
              //进行更新的操作：
              updateUser(this.form).then((response)=>{
                //提示修改成功
                this.$message({
                  showClose: true,
                  message: '修改成功！',
                  type: 'success'
                });
                //重新获取列表信息：
                this.getList();
              })
            }else{
              //进行添加操作：
              addUser(this.form).then((response)=>{
                //提示添加成功
                this.$message({
                  showClose: true,
                  message: '添加成功！',
                  type: 'success'
                })
                //重新获取列表信息：
                this.getList()
              })
            }


            //提交成功后将表单的数据进行重置：
            this.$refs.form.resetFields()

            //关闭弹窗：
            this.dialogFormVisible = false
          }
      })
    },
    //点击新增按钮方法
    handleAdd(){
        //显示弹窗：
        this.dialogFormVisible = true
        //设置弹窗的类型是新增：
        this.modelType = 0
    },
    //弹窗关闭时
    handleClose(){
      //对表单的数据进行重置：
      this.$refs.form.resetFields()
      //将弹窗进行关闭：
      this.dialogFormVisible = false
    },
    //点击取消时将表单数据进行重置：
    cancle(){
      this.handleClose()
    },
    //修改用户信息方法
    handleEdit(user) {
      this.modelType = 1                                      //设置弹窗的类型是更新
      this.dialogFormVisible = true                           //显示弹窗

      //注意：这里需要对数据进行深拷贝
      this.form = JSON.parse(JSON.stringify(user))             //将数据显示在弹窗当中
    },
    //删除用户信息的方法
    handleDelete(user) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //对列表数据进行删除：
          deleteUser({id: user.id}).then(()=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            //重新获取列表数据：
            this.getList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    //获取列表数据的方法：
    getList(){
      getUser({params: {...this.pageData,...this.userForm}}).then(({data})=>{
        console.log(data);
        this.tableData = data.list             //请求获取列表数据
        this.total = data.count || 0           //设置总条数
      })
    },
    //选择页码的回调函数：
    handlePage(val){
      //获取到当前页码：
      console.log(val);
      this.pageData.page = val    //修改当前页数据
      this.getList()              //重新获取用户的表单数据
    }
  },
  mounted(){
    //获取所有的用户信息：
    this.getList()
  }
};
</script>

<style lang='less' scoped>
    .manage{
      height: 90%;
      .common-table{
        height: calc(100% - 62px);   //动态的设置高度
        position: relative;
        .paper{
          position: absolute;
          right: 20px;
          bottom: 0px;
        }
      }
    }

</style>